<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-10-15 19:08:05
 * @LastEditTime: 2023-10-15 20:42:21
 * @LastEditors: ''
-->
<template>
  <div class="haloe-avatar-list" :class="'haloe-avatar-list-' + size">
    <div class="haloe-avatar-list-item" v-for="(item, index) in currentList" :key="index">
      <Tooltip :content="item.tip" v-if="tooltip && item.tip" :placement="placement">
        <Avatar :src="item.src" :icon="showIcon(item)" :custom-icon="showCustomIcon(item)" :size="size" :shape="shape"></Avatar>
      </Tooltip>
      <Avatar v-else :src="item.src" :icon="showIcon(item)" :custom-icon="showCustomIcon(item)" :size="size" :shape="shape"></Avatar>
    </div>
    <div class="haloe-avatar-list-item haloe-avatar-list-item-excess" v-if="$slots.extra">
      <Avatar :size="size" :icon="showIcon(item)" :custom-icon="showCustomIcon(item)" :shape="shape" :style="excessStyle"><slot name="extra"></slot></Avatar>
    </div>
    <div class="haloe-avatar-list-item haloe-avatar-list-item-excess" v-else-if="list.length > max">
      <Avatar :size="size" :icon="showIcon(item)" :custom-icon="showCustomIcon(item)" :shape="shape" :style="excessStyle"><slot name="excess">+{{ list.length - max }}</slot></Avatar>
    </div>
  </div>
</template>

<script setup>
import {computed} from "vue"

import Avatar from "../avatar/avatar.vue"
import Tooltip from "../tooltip/tooltip-v2.vue"

import {oneOf} from "../../utils/assist"
defineOptions({
  name: 'AvatarList'
})


const props=defineProps({
  list: {
    type: Array,
    default () {
      return [];
    }
  },
  shape: {
    validator (value) {
      return oneOf(value, ['circle', 'square']);
    },
    default: 'circle'
  },
  size: {
    validator (value) {
      return oneOf(value, ['small', 'large', 'default']);
    },
    default: 'default'
  },
  excessStyle: {
    type: Object,
    default () {
      return {};
    }
  },
  max: {
    type: Number
  },
  tooltip: {
    type: Boolean,
    default: true
  },
  placement: {
    validator (value) {
      return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
    },
    default: 'top'
  },
  icon: {
    type: String
  },
  customIcon: {
    type: String,
    default: ''
  }
})

const currentList=computed(()=>{
  const len=props.list.lenght;
  const max=props.max
  if(len<=max){
    return [...props.list]
  }else{
    return [...props.list].slice(0,max)
  }
})

const showIcon=(item)=>{
  if(item && item.icon) return item.icon
}

const showCustomIcon=(item)=>{
  if(item && item.customIcon) return item.customIcon
}
</script>
